<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="innerVisible" @close="end" fullscreen>
    <div class="flex justifyContentSpaceBetween" style="width: 96%;">
      <div class="tabletext">表单配置</div>
      <div class="tablelink">
        <el-link icon="el-icon-plus" @click="submitFormInfo" type="primary" :underline="false">提交表单</el-link>
      </div>
    </div>
    <basic-container>
      <avue-form-design :toolbar="toolbar" ref="design" :showGithubStar="false" :options="option"
         >
      </avue-form-design>
    </basic-container>
  </el-dialog>
</template>
<script>
  import AvueUeditor from "avue-plugin-ueditor";
  import {
    putObj,
    getObj
  } from '@/api/admin/sysformconf'
  export default {
    comments: {
      AvueUeditor,
    },
    data() {
      return {
        dataForm: {
          formId: 0,
          formInfo: '',
        },
        toolbar: ['preview', 'clear'],
        innerVisible: false,
        option: {
          column: [],
          submitBtn:false,
          emptyBtn:false,
          menuBtn:false
        },
      };
    },

    methods: {
  
      getFormInfo(id) {
        this.dataForm.formId = id;
        this.innerVisible = true;
        this.$nextTick(() => {
          if (this.dataForm.formId) {
            getObj(this.dataForm.formId).then(response => {
              this.dataForm = response.data.data;
              if (this.dataForm.formInfo) {
                this.option.column = JSON.parse(this.dataForm.formInfo);

              }
            })
          }
        })
      },
      /**
       * 提交表单
       */
      submitFormInfo() {
        var _this = this;
        this.$refs.design.getData().then(res => {

            var formInfo1 = JSON.stringify(res.column)
            _this.dataForm.formInfo = formInfo1;
            _this.$confirm('确认当前配置表单', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(function () {
              return putObj(_this.dataForm)
            }).then(data => {
              _this.option.column = [];
              _this.dataForm = {
                formId: 0,
                formInfo: '',
              };
              _this.innerVisible = false;
              _this.$notify.closeAll();
              _this.$notify.success('提交成功')

            })
          
        });
      },
      end() {
        this.option.column = [];
        this.dataForm = {
          formId: 0,
          formInfo: '',
        };
        this.innerVisible = false;
      }
    },
  };

</script>
<style lang="scss">
  .form-designer .widget-form-container .widget-form-list {
    height: 1000px;

  }

</style>
